@import shared.VarTool
@()
@mainWithSearch("Search") {

	<div class="panel panel-default">
		<div class="panel-heading">
			<h3 class="panel-title"><span class="glyphicon glyphicon-search"></span> Search</h3>
		</div>
		<div class="panel-body"></div>
		<div class="row">
			<div class="col-sm-3">
				<div class="bs-docs-sidebar" role="complementary">
					<ul class="nav bs-docs-sidenav">
						<li class="active"><a href="#mRna" data-toggle="tab">mRNA and lncRNA</a></li>
						<li class=""><a href="#circ" data-toggle="tab">circRNA</a></li>
						<li class=""><a href="#pathway" data-toggle="tab">Pathway</a></li>
						<li class=""><a href="#cell" data-toggle="tab">Tissue/Cell origin</a></li>
					</ul>
				</div>
			</div>

			<div class="col-sm-8 tab-content myform" >
				<div class="tab-pane active" id="mRna">
					<form class="form-horizontal" action="@routes.MrnaController.toResultByName" method="post" id="form">
						<h4>Required:</h4>
						<hr>

						<div class="form-group">
							<label class="control-label col-sm-3">Gene symbol:</label>
							<div class="col-sm-8">
								<textarea class="form-control" name="id"  rows="5"></textarea>
								<span class="help-block">e.g.,&nbsp;<a href="#" onclick="Search.showExample(this, 'id')"><em id="egGene">
									TRAF3,GAB2,SNX1</em></a></span>
							</div>
						</div>
						<hr>
						<div class="form-group">
							<div class="actions col-sm-offset-4 col-sm-3">
								<button type="submit" class="btn btn-primary " id="geneSearch" style="width: 90%">search</button>
							</div>
							<div class="actions col-sm-3">
								<button type="reset" class="btn btn-primary" style="width: 90%;
									margin-left: 10px">reset</button>
							</div>
						</div>
					</form>
				</div>

				<div class="tab-pane " id="circ">

					<ul class="nav nav-tabs" style="margin-top: 10px">

						<li class="active">
							<a href="#keyword" data-toggle="tab" > Keyword Search </a>
						</li>

						<li class="" id="expressLi">
							<a href="#advanced" data-toggle="tab" > Advanced filter</a>
						</li>

					</ul>

					<div id="myTabContent" class="tab-content">

						<div class="tab-pane fade in active" id="keyword">

							<form class="registration-form form-horizontal" id="form"
							accept-charset="UTF-8" method="post" action="@routes.CircRnaController.toResultBySymbolOrId">

								<input type="hidden" name="kind" value="@VarTool.circRnaKind">

								<div class="form-group">
									<label class="control-label col-sm-3">Gene symbol
										or circRNA ID:</label>
									<div class="col-sm-8">
										<textarea class="form-control" name="id" id="circs" rows="5"
										required></textarea>
										<span class="help-block">e.g.,&nbsp;<a href="#" onclick="Search.showExample(this, 'id')"><em id="egCrics">
											HIPK3,exo_circ_000001,exo_circ_000234,exo_circ_000309</em></a></span>
									</div>
								</div>

								<hr>
								<div class="form-group">
									<div class="actions col-sm-offset-4 col-sm-3">
										<button type="submit" class="btn btn-primary " id="circSearch" style="width: 90%">search</button>
									</div>
									<div class="actions col-sm-3">
										<button type="reset" class="btn btn-primary" style="width: 90%;
											margin-left: 10px">reset</button>
									</div>
								</div>

							</form>

						</div>

						<div class="tab-pane " id="advanced">

							<form class="registration-form form-horizontal" id="form"
							accept-charset="UTF-8" method="post" action="@routes.CircRnaController.toResultByPosition">

								<input type="hidden" name="kind" value="@VarTool.circRnaKind">

								<div class="form-group">
									<label for="Gene" class="col-sm-3 control-label">Chromosome:</label>
									<div class="col-sm-5">
										<select name="chr" required class="form-control">

											<option value="Chr1">Chr1</option>

											<option value="Chr2">Chr2</option>

											<option value="Chr3">Chr3</option>

											<option value="Chr4">Chr4</option>

											<option value="Chr5">Chr5</option>

											<option value="Chr6">Chr6</option>

											<option value="Chr7">Chr7</option>

											<option value="Chr8">Chr8</option>

											<option value="Chr9">Chr9</option>

											<option value="Chr10">Chr10</option>

											<option value="Chr11">Chr11</option>

											<option value="Chr12">Chr12</option>
											<option value="Chr13">Chr13</option>
											<option value="Chr14">Chr14</option>
											<option value="Chr15">Chr15</option>
											<option value="Chr16">Chr16</option>
											<option value="Chr17">Chr17</option>
											<option value="Chr18">Chr18</option>
											<option value="Chr19">Chr19</option>
											<option value="Chr20">Chr20</option>
											<option value="Chr21">Chr21</option>
											<option value="Chr22">Chr22</option>
											<option value="ChrX">ChrX</option>
											<option value="ChrY">ChrY</option>
										</select>
									</div>
								</div>
								<div class="form-group">
									<label class="control-label col-sm-3">Start Location:</label>
									<div class="col-sm-5">
										<input class="form-control" type="text" name="start" placeholder="Start position"
										id='start'   />
									</div>
									<label class='control-label'>e.g., <a href="#" onclick="Search.showExample(this, 'start')"><em id='egStart'>1456789</em></a></label>
								</div>
								<div class="form-group">
									<label class="control-label col-sm-3">End Location:</label>
									<div class="col-sm-5">
										<input class="form-control" type="text" name="end" placeholder="End position"
										id='end'  />
									</div>
									<label class='control-label'>e.g., <a href="#" onclick="Search.showExample(this, 'end')"><em id='egEnd' >1799799</em></a></label>
								</div>
								<div class='form-group'>
									<div class="actions col-sm-offset-3 col-sm-2">
										<button type="submit" class="btn btn-primary " id="regionSearch" style="width: 100%">search</button>
									</div>
									<div class="actions col-sm-2">
										<button type="reset" class="btn btn-primary" style="width: 100%">reset</button>
									</div>
								</div>

							</form>

						</div>

					</div>

				</div>

				<div class="tab-pane " id="pathway">
					<form class="form-horizontal" action="@routes.PathwayController.toResultByIdOrName" method="post" id="form">
						<h4>Required:</h4>
						<hr>

						<input type="hidden" name="kind" value="@VarTool.pathwayKind">

						<div class="form-group">
							<label class="control-label col-sm-3">Pathway ID or name:</label>
							<div class="col-sm-8">
								<textarea class="form-control" name="id" rows="5"></textarea>
								<span class="help-block">e.g.,&nbsp;<a href="#" onclick="Search.showExample(this, 'id')"><em>
									P00001,Interferon gamma response</em></a></span>
							</div>
						</div>
						<hr>
						<div class="form-group">
							<div class="actions col-sm-offset-4 col-sm-3">
								<button type="submit" class="btn btn-primary " id="geneSearch" style="width: 90%">search</button>
							</div>
							<div class="actions col-sm-3">
								<button type="reset" class="btn btn-primary" style="width: 90%;
									margin-left: 10px">reset</button>
							</div>
						</div>
					</form>
				</div>

				<div class="tab-pane " id="cell">
					<form class="form-horizontal" action="@routes.CellController.toResultByIdOrName" method="post" id="form">
						<h4>Required:</h4>
						<hr>

						<input type="hidden" name="kind" value="@VarTool.cellKind">

						<div class="form-group">
							<label class="control-label col-sm-3">Tissue/Cell name:</label>
							<div class="col-sm-8">
								<textarea class="form-control" name="id" rows="5"
								required></textarea>
								<span class="help-block">e.g.,&nbsp;<a href="#" onclick="Search.showExample(this, 'id')"><em id="egGene">
									Adipose Tissue, CD4_naive</em></a></span>
							</div>
						</div>
						<hr>
						<div class="form-group">
							<div class="actions col-sm-offset-4 col-sm-3">
								<button type="submit" class="btn btn-primary " id="geneSearch" style="width: 90%">search</button>
							</div>
							<div class="actions col-sm-3">
								<button type="reset" class="btn btn-primary" style="width: 90%;
									margin-left: 10px">reset</button>
							</div>
						</div>
					</form>
				</div>

			</div>
		</div>
	</div>

	<script>

			$(function () {

			    Search.init

			})

	</script>


}